<template>
	<view class="u-wrap" :class="['qn-page-' + theme]">
		<cateOne v-if="cateTemplate === 1"></cateOne>
		<cateTwo v-if="cateTemplate === 2"></cateTwo>
		<cateThree v-if="cateTemplate === 3"></cateThree>
		<cateFour v-if="cateTemplate === 4"></cateFour>
		<!-- 底部Tabbar -->
		<Tabbar v-model="t_current"></Tabbar>
	</view>
</template>

<script>
import cateFour from './cateFour.vue';
import cateOne from './cateOne.vue';
import cateTwo from './cateTwo.vue';
import cateThree from './cateThree.vue';
export default {
	components: {
		cateOne,
		cateTwo,
		cateThree,
		cateFour
	},
	data() {
		return {
			cateTemplate: 0
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	onShow() {
		if (this.$store.state.basicSet.classSetting) {
			this.cateTemplate = this.$store.state.basicSet.classSetting.value;
		} else {
			this.cateTemplate = 4;
		}
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) {},
	// 收藏小程序
	onAddToFavorites() {},
	// #endif
	methods: {}
};
</script>

<style lang="scss" scoped>
.u-wrap {
	height: calc(100vh);
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
}

.u-search-box {
	padding: 18rpx 30rpx;
	.u-search-inner {
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;

		.u-search-text {
			font-size: 24rpx;
			color: $u-tips-color;
			margin-left: 20rpx;
		}
	}
}

.u-menu-wrap {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.u-tab-view {
	width: 200rpx;
	height: 100%;
	background-color: #ffffff;
	z-index: 1;
}
.u-tab-title {
	height: 80rpx;
	background: #ffffff;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
	color: #a9a9a9;
	font-weight: 400;
	line-height: 1;
	.u-tab-title-text {
		color: #666666;
		padding: 0 10upx;
	}
}
.u-tab-item {
	height: 80rpx;
	background: #ffffff;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #000000;
	font-weight: 400;
	line-height: 1;
}

.u-tab-item-active {
	position: relative;
	// color: #000;
	// font-size: 30rpx;
	// font-weight: 600;
	background: #fff;
}

.u-tab-item-active::before {
	content: '';
	position: absolute;
	border-left: 4rpx solid #f63434;
	height: 30rpx;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.u-tab-view {
	height: 100%;
}

.right-box {
	width: 650rpx;
	background-color: rgb(250, 250, 250);
	.right-box-scroll {
		height: calc(100vh - 190rpx);
	}
}

.page-view {
	padding: 0 22upx 22rpx;
	.cate-poster {
		border-radius: 12upx;
		overflow: hidden;
	}
}

.item-title {
	font-size: 28rpx;
	color: $u-main-color;
	line-height: 130upx;
	text-align: center;
}
.goods-ul {
	display: flex;
	flex-wrap: wrap;
	background-color: #ffffff;
	border-radius: 12upx;
	overflow: hidden;
	margin-bottom: 20px;

	.goods-li {
		width: 50%;
		border-bottom: 1px solid #f7f8fa;
		.goods-info {
			padding: 20upx 10upx;
			text-align: center;
			.goods-img {
				padding-bottom: 10upx;
			}
			.goods-name {
				font-size: 24upx;
				color: #232323;
			}
			.goods-desc {
				margin: 10upx 0;
				font-size: 20upx;
				color: #525252;
				-webkit-line-clamp: 1;
			}
			.goods-price {
				color: $price-color;
			}
		}
	}
	.goods-li:nth-child(odd) {
		border-right: 1px solid #f7f8fa;
	}
}
</style>
